<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入template-web.js -->
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #fff;
        }

        #container {
            width: 800px;
            min-height: 100%;
            box-sizing: border-box;
            padding: 20px 25px;
            background-color: #f6f6f6;
            overflow: auto;
        }

        .post {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid black;
        }

        .post p {
            margin-top: 15px;
        }

        .add-comment {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid black;
        }

        .add-comment h2 {
            margin-bottom: 10px;
        }

        .add-comment textarea {
            outline: none;
            width: 100%;
            max-width: 100%;
            min-width: 100%;
            min-height: 50px;
            box-sizing: border-box;
            padding: 10px;
        }

        .add-comment input {
            outline: none;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            margin-bottom: 10px;
        }

        .add-comment button {
            width: 100px;
            height: 25px;
            background-color: burlywood;
            color: white;
            outline: none;
            border: none;
            cursor: pointer;
        }

        .comments ul {
            list-style: none;
            margin-bottom: 15px;
        }

        .comments li {
            border-bottom: 1px dashed black;
            margin-bottom: 10px;
        }

        .comments li p {
            margin-bottom: 10px;
        }

        .comments li p:first-child {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="post">
            <h2 class="title">新年快乐</h2>
            <p class="author">楼主：行秋</p>
            <p class="content">祝大家新的一年，顺顺利利</p>
        </div>
        <div class="add-comment">
            <h2>发表回复</h2>
            <textarea name="" id="comment" cols="30" rows="10"></textarea>
            <input type="text" id="name">
            <button id="submit">发表</button>
        </div>
        <div class="comments">
            <ul></ul>
        </div>
    </div>
    <!-- 创建 script 标签创建模板,注意下面几点 -->
    <!-- 1. type="text/该斜杠后可以是 html,template... 不是script即可)" -->
    <!-- 2. 给 script 标签添加 id ，此 id 即为模板 id -->
    <!-- 3.模板 script 标签必须在 template() 方法调用的 script 标签之前 -->
    <script type="text/html" id="tpl">
            {{each data.comments}}
                <li>
                    <p class="floor">
                        <span>{{$value.id}}楼</span>
                        <a href="">删除</a>
                    </p>
                    <p class="author">层主: {{$value.author}}</p>
                    <p class="content">{{$value.content}}</p>
                </li>
            {{/each}}
    </script>
    <script>
        const d = {}

        $.get('http://localhost:3000/comments', function (comments) {
            d.comments = comments

            $('.comments ul').html(template('tpl', { data: d }));
        })
        $('#submit').on('click', function (e) {
            const content = $('#comment').val()
            const name = $('#name').val()

            if (content == '' || name == '') {
                alert('昵称或内容不能为空')
                return
            }

            $.post('http://localhost:3000/comments', {
                author: name,
                content: content
            }, function (data) {
                console.log(data);

                //更新页面
                $.get('http://localhost:3000/comments', function (comments) {
                    d.comments = comments;

                    $('.comments ul').html(template('tpl', { data: d }));
                })
            })
        });

        $('.comments ul').on('click', 'a', function (e) {
            e.preventDefault();

            const id = $(this).prev().text().split('')[0];
            $.ajax({
                url: 'http://localhost:3000/comments/' + id,
                type: 'delete',
                success: function(r) {
                    $.get('http://localhost:3000/comments', function (comments) {
                        d.comments = comments;

                        $('.comments ul').html(template('tpl', { data: d }));
                    })
                }
            })
        })


        // $.get('http://localhost:3000/post', function (post) {
        //     d.post = post;
        //     $.get('http://localhost:3000/comments', function (comments) {
        //         d.comments = comments;

        //         $('#container').html(template('tpl', { data: d }));

        //         $('#submit').on('click', function (e) {
        //             const content = $('#comment').val()
        //             const name = $('#name').val()

        //             if (content == '' || name == '') {
        //                 alert('昵称或内容不能为空')
        //                 return
        //             }

        //             $.post('http://localhost:3000/comments', {
        //                 author: name,
        //                 content: content
        //             }, function (data) {
        //                 console.log(data);

        //                 //更新页面
        //                 $.get('http://localhost:3000/comments', function (comments) {
        //                     d.comments = comments;

        //                     $('#container').html(template('tpl', { data: d }));
        //                 })
        //             })
        //         })

        //         $('ul').on('click', 'a', function(e) {
        //             e.preventDefault();
        //             const id = $(this).prev().text().split('')[0];
        //             $.ajax({
        //                 url: 'http://localhost:3000/comments/' + id,
        //                 type: 'delete',
        //                 success: function(r) {
        //                     $.get('http://localhost:3000/comments', function (comments) {
        //                         d.comments = comments;

        //                         $('#container').html(template('tpl', { data: d }));
        //                     })
        //                 }
        //             })
        //         })
        //     })
        // });


        // var user = {
        //     name: 'Template username'
        // }
        // var html = template('tpl', {user: user})
        // var container = document.querySelector('#container');
        // container.innerHTML = html;
    </script>
</body>

</html>